<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TAB切换</title>
	<meta name="keywords" content="" />
	<meta name="Description" content="" />
	<style>
		*{margin:0;padding:0;}
		ul,ol {list-style-type:none;}
		#nav,#nav1{width:800px;height:50px;border:1px solid #ccc;margin:0 auto;}
		#nav li,#nav1 li {float:left;width:198px;height:50px;line-height:50px;border-left:1px solid #ccc;border-right:1px solid #ccc;text-align:center;}
		#con,#con1 {clear:both;width:800px;height:100px;border:1px solid #ccc;margin:0 auto;}
		#con li,#con1 li {width:800px;height:100px;display:none;text-align:center;font-size:30px;}
		#nav .hover,#nav1 .hover {background:#ccc;}
		#con .show,#con1 .show {display:block;}
	</style>
	<script language="javascript">
	window.onload=function (){
	function tab(nav,con){
		var nav = document.getElementById(nav).getElementsByTagName("li");
		var con = document.getElementById(con).getElementsByTagName("li");
		function navclick(i){
			/*for (o=0; o<nav.length;o++ )
			{
			nav[o].className=o==i?"hover":"";
			con[o].className=o==i?"show":"";
			}*/
			for (o=0; o<nav.length;o++)
			{
				nav[o].className=nav[o]==i?"hover":"";
				con[o].className=nav[o]==i?"show":"";
			}
		}
		for (p=0;p<nav.length ;p++ )
		{
			/*(function(p){
			nav[p].onmouseover = function(){navclick(p)}
			})(p)*/
			nav[p].onmouseover = function(){navclick(this);}
			
		}
	}
	tab("nav","con");
	tab("nav1","con1");
	}

	</script>
</head>
<body>
	<ul ID="nav">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ol ID="con">
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
	<ul ID="nav1">
		<li class="hover">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<ol ID="con1">
		<li class="show">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ol>
</body>
</html>